<template>
     	<view>
        <up-navbar
            bgColor="#7099B4"
            :safeAreaInsetTop="true"
        >
          <template #left>
                <view class="nav-left">
                  <up-avatar class="logo" src="/static/logo.png" :size="size" mode="scaleToFill" />
                  <up-text text="Infinite Geo-Spatial Model" :lines="1" :size="14" :color="logoTitleColor"></up-text>
                </view>
          </template>
          <template #right>
            <view class="nav-right">
              <up-icon v-for="(icon, index) in icons" :key="index" class="icon" :name="icon.name" :size="icon.size?icon.size:size" color="#fff"
                @click="icon.handler && icon.handler()" />
            </view>
          </template>
        </up-navbar>
      </view>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, computed } from 'vue'
import { mapStore } from '@/stores'

const size = ref(26)
const logoTitleColor = ref('#fff')

const mapStoreFun = mapStore()

// 接收多个 v-model
const props = defineProps<{
  modelValueShowCategory: boolean
  modelValueShowMyCenter: boolean
  modelValueShowMyOrder: boolean
  modelValueShowMyCheckout: boolean
  modelValueSettingCheckout: boolean
  modelValueMyPosition: boolean
}>()

const emit = defineEmits<{
  (e: 'update:modelValueShowCategory', value: boolean): void
  (e: 'update:modelValueShowMyCenter', value: boolean): void
  (e: 'update:modelValueShowMyOrder', value: boolean): void
  (e: 'update:modelValueShowMyCheckout', value: boolean): void
  (e: 'update:modelValueSettingCheckout', value: boolean): void
  (e: 'update:modelValueMyPosition', value: boolean): void
}>()

// 我的位置功能
function toggleMyPosition() {
  const newPositionState = !mapStoreFun.position
  mapStoreFun.position = newPositionState
  mapStoreFun.SET_POSITION(newPositionState)
  emit('update:modelValueMyPosition', newPositionState)
}

// 图标点击事件封装
const icons = computed(() => [
  {
    name: '/static/images/search.png',
    size: 25,
    handler: () => emit('update:modelValueShowCategory', !props.modelValueShowCategory)
  },
  {
    name: mapStoreFun.position ? '/static/images/location_on.png' : '/static/images/location_off.png',
    size: 24,
    handler: toggleMyPosition
  },
  // {
  //   name: 'account-fill',
  //   handler: () => emit('update:modelValueShowMyCenter', !props.modelValueShowMyCenter)
  // },
  {
    name: '/static/images/feedback.png',
    size: 23,
    handler: () => emit('update:modelValueShowMyOrder', !props.modelValueShowMyOrder)
  },
  {
    name: '/static/images/setting.png',
    size: 23,
    handler: () => emit('update:modelValueSettingCheckout', !props.modelValueSettingCheckout)
  },
  // {
  //   name: 'shopping-cart',
  //   handler: () => emit('update:modelValueShowMyCheckout', !props.modelValueShowMyCheckout)
  // }
])
</script>

<style scoped lang="scss">
.nav-left {
  display: flex;
  align-items: center;
  max-width: 60vw;
  gap: 20rpx;
  .title {
    font-size: 32rpx;
    font-weight: bold;
  }
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 20rpx;
}
</style>
